<template>
  <div class="content-info">
    <LabelTitle text="事件类型分析"></LabelTitle>
    <div class="content-box mt10">
      <div class="sjbh-echarts mr20">
        <pie titleName="总数" :options="pieData"></pie>
      </div>
      <div class="right-lengend">
        <p class="title">
          <span>类型</span>
          <span>占比</span>
          <span>总数</span>
        </p>
        <div
          class="type-box"
          v-for="(item, index) in lenglist"
          :class="{ active: index % 2 == 1 }"
          :key="index"
        >
          <span class="color" :style="{ background: color[index] }"></span>
          <span class="text exlipse" :title="item.type">{{ item.type }}</span>
          <span class="text">{{ item.persent }}</span>
          <span class="text">{{ item.num }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import LabelTitle from "@/components/labeltitle.vue";
import { onMounted } from "vue";
import pie from "../pie.vue";

const props = defineProps({
  allData: Object,
});

let pieData = ref([]);
let color = ref([
  "#05BDF7",
  "#FFCE40",
  "#6CD06A",
  "#CDDEE1",
  "#AA88FF",
  "#F97E7E",
  "#2E9BFC",
  "#F49B28",
  "#F29EFE",
  "#90DBDB",
  "#039700",
  "#9FC0C6",
  "#6C31FF",
  "#B06060",
  "#B420C9",
  "#FF1010",
  "#D1BEBF",
  "#00769B",
  "#29B5B6",
  "#CE9900",
  "#D0BA93",
  "#B6ABD1",
  "#EAB8B8",
  "#A7D6FF",
  "#D9C659",
  "#969098",
]);
let lenglist = ref([]);

const getData = async () => {
  try {
    let data = [];
    let allNum = 0;
    props.allData.eventTypeCntList.forEach((item) => {
      allNum += item.count;
    });
    props.allData.eventTypeCntList.forEach((item) => {
      data.push({
        type: item.eventType,
        num: item.count,
        persent: ((item.count / allNum) * 100).toFixed(2) + "%",
      });
    });
    // let data = [
    //   {
    //     type: "占道经营",
    //     num: 122,
    //     persent: "24%",
    //   },
    //   {
    //     type: "占道经营",
    //     num: 111,
    //     persent: "24%",
    //   },
    //   {
    //     type: "占道经营",
    //     num: 222,
    //     persent: "24%",
    //   },
    //   {
    //     type: "占道经营",
    //     num: 121,
    //     persent: "24%",
    //   },
    //   {
    //     type: "占道经营",
    //     num: 221,
    //     persent: "24%",
    //   },
    //   {
    //     type: "占道经营",
    //     num: 333,
    //     persent: "24%",
    //   },
    // ];
    lenglist.value = data;
    let arr = [];
    data.forEach((item, index) => {
      arr.push({
        value: item.num,
        name: item.type,
        itemStyle: {
          color: color.value[index],
        },
      });
    });
    pieData.value = arr;
  } catch (e) {
    console.error(e);
  }
};

watch(
  () => props.allData,
  (newval) => {
    getData();
  },
  {
    deep: true,
    immediate: true,
  }
);

onMounted(() => {
  // getData();
});
</script>

<style lang="scss" scoped>
.content-info {
  width: calc(50% - 10px);
  height: 320px;
  margin-right: 20px;
  .content-box {
    height: 290px;
    background: #ffffff;
    box-shadow: 0px 0px 20px 0px rgba(70, 102, 149, 0.06);
    border-radius: 12px;
    display: flex;
    align-items: top;
    padding: 26px 47px 28px 0;
    .sjbh-echarts {
      width: 48%;
      height: 100%;
    }

    .right-lengend {
      width: 50%;
      .title {
        width: 100%;
        height: 26px;
        line-height: 26px;
        display: flex;
        align-items: center;
        background: #2263bf;
        span {
          display: inline-block;
          width: 33%;
          color: #ffffff;
          text-align: center;
        }
      }
      .type-box {
        width: 100%;
        height: 35px;
        line-height: 35px;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        &.active {
          background: rgba(34, 99, 191, 0.06);
        }

        .color {
          width: 14px;
          height: 14px;
          border-radius: 1px;
          margin-right: 10px;
          margin-left: 9px;
        }
        .text {
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 12px;
          color: #666666;
          line-height: 35px;
          width: 30%;
          &:nth-child(3) {
            padding-left: 12px;
          }
          &:nth-child(4) {
            padding-left: 22px;
          }
        }
      }
    }
  }
}
</style>
